<template>
  <div class="product">
    <Breadcrumb></Breadcrumb>
    <!--表头的搜索框-->
    <div class="header">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
        <el-form-item label="产品名称">
          <el-input v-model="formInline.productName" @blur="serachBlur($event)" placeholder="产品名称"></el-input>
        </el-form-item>
        <el-form-item label="添加时间">
            <el-date-picker
              v-model="formInline.addTime"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="button-group">
         <el-row>
          <el-button type="warning" icon="el-icon-plus" plain size="mini" @click="toProductPage">添加商品</el-button>
          <el-button type="danger" icon="el-icon-delete" plain size="mini" @click="batchDeleteSelect($event)">批量删除</el-button>
        </el-row>
      </div>
    </div>
    <!---产品列表的展示区-->
    <!--header-row-class-name 给表头添加样式
    cell-class-name 给表格的单元格添加样式
    -->
    <div class="content">
       <el-table
        :data="productList" border
        @selection-change="handleSelectionChange"
        style="width: 100%" header-row-class-name="active-header" cell-class-name="table-center" header-cell-class-name="table-center" size="small">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="id"
          label="商品编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="title"
          label="商品名称" show-overflow-tooltip>
          <template slot-scope="scope">
            <span @click="goodsDesc(scope.row)" style="color:blue;cursor: pointer;">{{scope.row.title}}</span>
          </template>
        </el-table-column>
         <el-table-column
          prop="price"
          label="商品价格">
        </el-table-column>
         <el-table-column
          prop="category"
          label="商品类目">
        </el-table-column>
         <el-table-column
          prop="create_time"
          label="添加时间">
          <template slot-scope="scope">
            <span>{{moment(scope.row.create_time).format('YYYY-MM-DD HH:mm:ss')}}</span> <!--scope.row可以拿到整行的数据-->
          </template>
        </el-table-column>
         <el-table-column
          prop="sellPoint"
          label="商品卖点" show-overflow-tooltip>
        </el-table-column>
         <el-table-column
          label="商品描述" show-overflow-tooltip> <!--show-overflow-tooltip多出的部分隐藏鼠标悬浮展示-->
          <template slot-scope="scope">
            {{ removeHTMLTag(scope.row.descs) }}
          </template>
        </el-table-column>
         <el-table-column label="操作" width="250px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
    </el-table-column>
    </el-table>
    </div>
    <!--pageSize这个参数可以通过选项卡去选择-->
    <pagination :pageSize = page.pageSize :total = page.total @CurrentPageChange="CurrentPageChange" @PageSizeChange="PageSizeChange"></pagination>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb.vue';
//引入一个单独得到分页插件
import Pagination from '@/components/Pagination.vue'
import moment from "moment";  //时间格式化处理插件
import {removeHTMLTag} from '@/utils/common'
import { mapMutations } from 'vuex';
export default {
  name: '',
  components:{
    Pagination,
    Breadcrumb
  },
  data(){
    return {
      page:{
        pageSize: 8, //后端接口固定为8
        total: 0  //总数据需要在组件挂载的时候去计算，目前后台没有支持查询总数的方法
      },
      formInline:{
        productName: "",
        addTime:""
      },
      //  tableData: [{
      //       date: '2016-05-02',
      //       name: '王小虎',
      //       address: '上海市普陀区金沙江路 1518 弄'
      //     }, {
      //       date: '2016-05-04',
      //       name: '王小虎',
      //       address: '上海市普陀区金沙江路 1517 弄'
      //     }, {
      //       date: '2016-05-01',
      //       name: '王小虎',
      //       address: '上海市普陀区金沙江路 1519 弄'
      //     }, {
      //       date: '2016-05-03',
      //       name: '王小虎',
      //       address: '上海市普陀区金沙江路 1516 弄'
      //     }],
      productList:[],
      title:'',
      currentPageNumber:'', //点击删除按钮时，当前数据所处的页码
      ids:[],  //存储产品列表中被选中的数据的id
    }
  },
  methods: {
      moment, //注意需要注册一下moment方法
      removeHTMLTag,
      //点击打开商品详情页
      goodsDesc(){
        this.changeTitle("详情")
        this.$router.push('/product/add-product') //跳转到商品详情页
        this.changeGoodsData(row)
      },
      handleSelectionChange(selection){
        console.log("当前选中的数据",selection)
        //可以通过selection拿到当前选中的数据
        //如果需要批量删除，则可以将选中的数据的id传递给后端进行删除操作
        let arr=[]
        selection.forEach(element => {
          arr.push(element.id) //将选中的数据的id存储到ids数组中
        });
        this.ids = arr
        console.log("当前选中的数据的id",this.ids)
        //this.$api.batchDelete({ids:selection.map(item=>item.id)})  //批量删除
      },
      //批量删除选中的数据
      batchDeleteSelect(event){
        console.log("批量删除按钮被点击了",event)
        console.log("获取到删除的数据的id",this.ids)
        let selectIds = this.ids.join(',') //将数组转换为字符串
        if(selectIds){
          this.$api.batchDeleteSelect({ids:selectIds}).then(res=>{
            console.log("批量删除的结果",res)
            if(res.data.status === '200'){
              this.$message({
                type: 'success',
                message: '批量删除成功!'
              });
              //重新渲染页面
              this.getProjectList(this.currentPageNumber) //重新渲染当前页的数据
            }else{
              this.$message({
                type: 'error',
                message: '批量删除失败!'
              });
            }
          }).catch(err=>{
            console.log("批量删除失败",err)
        })
      }else{
          this.$message({
            type: 'warning',
            message: '请至少选择一条数据进行删除!'
          });
        }
      },
      onSubmit() {
        console.log('获取到表单的数据',this.formInline);
        //1.拿到表单数据，这里会拿到产品名称和时间，实际上只用到产品名称查询数据库
        this.searchGoods(this.formInline.productName)
      },
      ...mapMutations('goods',['changeTitle','changeGoodsData']),
      handleEdit(index, row) {
        //编辑页面和添加页面共享，所以页面的标题需要通过变量控制 
        //点击编辑按钮修改标题，和传递goodsData数据用于编辑页面的回显
        console.log(index, row);  //拿到当前行的索引值和整行数据row
        this.changeTitle('编辑')
        this.changeGoodsData(row)
        this.$router.push('/product/add-product') //跳转页面
      },
      handleDelete(index, row) {
        //获取到数据的index值和整行数据的row，实际这里只用到数据的id，根据数据的id进行数据库的操作
        console.log(index, row);
         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //进行数据库的删除操作
          this.deleteGoodById(row.id)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      async getProjectList(page){
        let res = await this.$api.projectList({page})
        console.log('获取产品列表数据', res);
        this.productList = res.data.data;  //获取到产品列表数据
        console.log("res.data",res.data)
        this.page.total = res.data.total  //数据总条数
      },
      CurrentPageChange(pageNumber){
        console.log("列表组件获取到分页组件传递过来的页码为：",pageNumber)
        this.currentPageNumber = pageNumber
        this.getProjectList(pageNumber)
      },
      async searchGoods(search){
        let result = await this.$api.searchGoods(search)
        console.log("获取到查询结果列表:",result.data)
        if(result.data.status === '200'){
          this.productList = result.data.result
          //还要考虑处理分页,先简单处理，页大小设置为当前接口返回的数据条数，保证一页就可以完整展示
          this.page.pageSize = result.data.result.length
          this.page.total = result.data.result.length
        }else{
          console.log("没有查到相关数据")
          //将渲染列表置空
          this.productList = []
          this.page.pageSize = 1
          this.page.total = 1
        }
      },
      //当失去焦点的时候，并且判断input框中没有输入数据，则默认展示第一页的数据
      serachBlur(event){
        console.log("失去焦点数据被触发",event)
        if(!this.formInline.productName){
          console.log("没有任何输入默认回到第一页的数据")
          this.getProjectList(1)
        }
      },
      async deleteGoodById(id){
        let res = await this.$api.deleteGood({id})
        if(res.data.status === "200"){
           this.$message({
            type: 'success',
            message: '删除成功!'
          });
          //删除成功之后重新渲染页面，删除的是那一页的数据就删除那一页的数据，确定是那一页是CurrentPageChange，即分页插件通过触发自定义的事件传递过来的
          if(this.total%this.pageNumber === 1){
             this.currentPageNumber = this.currentPageNumber-1 > 0?this.currentPageNumber:1 //当前页只有一条数据时，如果删除，应该渲染前一页的数据,并且保证至少有一页，即使·1数据条数为0
             this.getProjectList(this.currentPageNumber) 
          }
  
        }else{
          console.log("删除失败")
        }
      },
      toProductPage(){
        console.log("添加商品路由跳转到商品添加页面")
        this.changeTitle('添加')
        this.$router.push("/product/add-product")
      },
      // 页大小发生改变,后端暂时不支持
      PageSizeChange(val){
        console.log("当前页大小调整为",val)
      }
    },
    mounted(){
      this.getProjectList(1)
    },
    created(){
      this.getProjectList(1);  //默认获取第一页的数据
    }
  }
</script>
<style scoped lang="less">
/*@import url(); 引入公共css类*/
  .header{
     background-color: #fff;
     padding: 20px 10px;
     .button-group{
        //background-color: red;
        border: 1px solid #eee;
        padding: 8px;  //设置外边距
     }
     .el-form-item{
       margin-bottom: 10px;
     }

  }
  .content{
      background-color: #fff;
      /deep/ .active-header{
        color: #333;
      }
      /deep/ .table-center{
        text-align: center;
      }
      
     
  }

</style>
